<!--
  * 通知  表单
  * 
  * @Author:    1024创新实验室-主任：卓大 
  * @Date:      2022-08-21 19:52:43 
  * @Wechat:    zhuda1024 
  * @Email:     lab1024@163.com 
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
-->
<template>
    <a-modal v-model:visible="visible" width="1000px" title="详情" :footer="null" >
        <a-form
    style="padding: 40px;"
    :label-col="{ span: 6 }"
    >
        <a-row>
            <a-col :span="8">
                <a-form-item label="项目编号" name="projectCode">
                    <a-input-search
                    v-model:value="formData.projectCode"
                    placeholder="项目编号"
                    :disabled="disabled"
                    />
                </a-form-item>
            </a-col>
            <a-col :span="8" >
                <a-form-item label="项目名称" name="projectName">
                    <a-input v-model:value="formData.projectName" disabled placeholder="项目名称" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="项目地址" name="address">
                    <a-input v-model:value="formData.address" disabled placeholder="项目地址" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="日期" name="workDay">
                    <a-date-picker v-model:value="formData.workDay" :disabled="disabled"  value-format="YYYY-MM-DD" />
                </a-form-item>
            </a-col>
        </a-row>
    

    
    
        <a-table
            rowKey="noticeId"
            :columns="tableColumns"
            :dataSource="tableData"
            size="small"
            bordered
            :pagination="false"
            :scroll="{ y: 250}"
            >
            <template #bodyCell="{ column, record, text,index }">
              <template v-if="column.dataIndex === 'index'">
                {{ index+1 }}
              </template>
                <template v-if="column.dataIndex === 'outsourcingPersonnelId'">
                  <a-select
                    v-model:value="record.outsourcingPersonnelId"
                    style="width: 100%"
                    :options="userOptions"
                    :disabled="disabled"
                  ></a-select>
                </template>
                <template v-if="column.dataIndex === 'hourage'">
                  <a-select
                    v-model:value="record.hourage"
                    style="width: 100%"
                    :disabled="disabled"
                    :options="[{value:0.5,label:'半天'},{value:1,label:'一天'}]"
                  ></a-select>
                </template>
                <template v-if="column.dataIndex === 'location'">
                  <!-- <a-input v-model:value="record.location" placeholder="施工位置" /> -->
                  <DictSelectByKey style="width: 100%" :disabled="disabled"
                             key-code="construction_location"
                             v-model:value="record.location" />
                </template>
                <template v-if="column.dataIndex === 'workContent'">
                  <a-input v-model:value="record.workContent" :disabled="disabled" placeholder="工作内容" />
                </template>
            </template>
        </a-table>
  </a-form>
    </a-modal>
    
</template>

<script setup>
  import { reactive, ref, onMounted, watch, computed, nextTick,defineProps } from 'vue';
  import {projectDailyReportApi} from "/@/api/business/oa/projectDailyReport.js";
  import { message } from 'ant-design-vue';
  import DictSelectByKey from '/@/components/support/dict-select-by-key/index.vue';

    //弹窗是否显示   
  const visible = ref(false)
    //显示弹窗
    function show(data){{
        visible.value = true;
        if(data.projectId){
            formData.projectId = data.projectId
            formData.projectCode = data.projectCode
            formData.projectName = data.projectName
            formData.address = data.projectAddress
            formData.workDay = data.workDay
        }
        if(data.timesheetDetailsVOList&&data.timesheetDetailsVOList.length){
            tableData.value = data.timesheetDetailsVOList.map(item=>{
                return {
                outsourcingPersonnelId:item.id,
                hourage:item.hourage,
                location:item.location,
                workContent:item.workContent,
                }
            })
        }
    }}   

  const props = defineProps({
    modelValue: {
      type: Object,
      default() {
        return {};
      },
    },
  })
  const disabled = ref(true)
  
  // 表单默认数据
  const defaultFormData = {
    projectId:'',
    projectCode:'',
    projectName:'',//
    projectLeaderId:'',
    address:'',
    workDay:null
  };
  // 表单数据
  const formData = reactive({ ...defaultFormData });
  

    //表格数据
    const tableData = ref([{
      outsourcingPersonnelId:'',
      hourage:'',
      location:'',
      workContent:'',
    }])
    // 表格字段
    const tableColumns = ref([
    {
      title: `序号`,
      dataIndex: 'index',
      width: 50,
      align:'center'
    },
    {
      title: `外包员工`,
      dataIndex: 'outsourcingPersonnelId',
      ellipsis: true,
    },
    {
      title: `工作时长`,
      dataIndex: 'hourage',
      ellipsis: true,
    },
    {
      title: `施工位置`,
      dataIndex: 'location',
      ellipsis: true,
    },
    {
      title: `工作内容`,
      dataIndex: 'workContent',
      ellipsis: true,
    },
    // {
    //   title: '操作',
    //   dataIndex: 'action',
    //   fixed: 'right',
    //   width: 90,
    // },
  ]);
  
  
 
  // 外包人员下拉
  const userOptions= ref([])
  function getuser(){
    projectDailyReportApi.queryAllByGroupLeaderId().then(res=>{
      console.log(res.data);
      userOptions.value = res.data.map(item=>{
        return {
          value:item.id,
          label:item.name
        }
      })
    })
  }
  defineExpose({
    show,
  });
  onMounted(()=>{
    getuser();
  })
</script>

<style lang="less" scoped>
  .visible-list {
    display: flex;
    flex-wrap: wrap;
    .visible-item {
      padding-top: 8px;
    }
  }
</style>

